<template>
  <div class="detail">
    <div class="container">
      <el-descriptions title="商品信息" border direction="vertical" :contentStyle="CS" :label-style="LS">
        <el-descriptions-item label="商品名">
          <span style="font-size: 20px;">{{ cakeInfo.cakeName }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="价格">
          <span style="color: crimson; font-size: 30px; width: 200px;">￥{{ cakeInfo.price / 100 }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="图片">
          <img style="width: 300px;" :src="cakeInfo.imgUrl" alt="">
        </el-descriptions-item>
        <el-descriptions-item label="商品描述">
          {{ cakeInfo.detail }}
        </el-descriptions-item>
        <el-descriptions-item label="操作">
          <el-button type="primary" style="float: right;" @click="add">加入购物车</el-button>
        </el-descriptions-item>
      </el-descriptions>

    </div>
  </div>
</template>

<script>
import { getCakeDetail,addCake } from '@/api/index'
//通过辅助函数获取数据
export default {
  name: "Detail",
  data() {
    return {
      //控制商品购买个数
      skuNum: 1,
      cakeId: this.$route.query.id,
      cakeInfo: [],
      CS: {
        'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        'color': '#000',
        'text-align': 'center',
        'font-weight': '600',
        'height': '40px',
        'min-width': '110px',
        'word-break': 'keep-all'
      }
    }
  },
  mounted() {
    this.getCake()
  },
  methods: {
    add() {
      let param = {
        cakeId:this.cakeId,
        count:1
      }
      addCake(param).then(res => {
        this.$message({
          type:'success',
          message:'添加成功！'
        }).catch(err =>{
          this.$message({
            type:'error',
            message:'添加失败，请检查网络'
          })
        })
      })
    },
    getCake() {
      getCakeDetail(this.cakeId).then(res => {
        this.cakeInfo = res.data
      })
    },
    //加入购物车按钮
    async addOrUpdateCart() {
      //派发action:携带的载荷，分别商品的id、商品个数
      //思考底下的这行代码实质做了一个什么事情?
      //实质就是调用了小仓库里面相应的这个函数->addOrUpdateCart,声明部分加上asyc,这个函数执行的结构一定是Promise
      //返回结果是一个Promise对象【三种状态:pending、成功、失败】，返回状态到底是什么，取决于这个函数addOrUpdateCart返回结果
      try {
        //成功干什么
        await this.$store.dispatch("addOrUpdateCart", {
          skuId: this.$route.params.skuId,
          skuNum: this.skuNum,
        });
        //路由跳转:携带参数,携带参数一般都是基本类型数据【字符串、数字等等】，引用类型数据白扯【传递过来路由获取不到】！！！
        //浏览器存储功能，在路由跳转在之前，存储到浏览器中
        sessionStorage.setItem('SKUINFO', JSON.stringify(this.skuInfo));
        //路由跳转
        this.$router.push({
          path: "/addcartsuccess",
          query: { skuNum: this.skuNum },
        });
      } catch (error) {
        //失败干什么
        alert("加入购物车失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  .container {
    padding-top: 30px;
    width: 1200px;
    margin: 0 auto;
  }
}
</style>